<template>
  <div ref="box" @scroll="onScroll" class="article-list">
    <!-- 
        load事件绑定的 onLoad 方法
            是专门用来加载数据的方法
            它会在数据没铺满时自动调用，当滚动条滚到最后会再次调用

        v-model绑定的loading
            用来标记当前是否正在加载
            为true代表正在加载，就不会调用onLoad去发请求
            为false就代表当前没有在加载数据，咱们可以去加载数据（也就是可以调用onLoad），所以默认值应该是false
            
            onLoad调用的时候会自动把这个值改成true，因为要显示一个加载动画

            记得每次加载完数据了，要把loading这个值改成false，代表结束加载状态，可以继续下次加载
     
        :finished绑定的finished变量
            是用来标记有没有全部加载完成，为false代表没有全部加载完成
            为true代表全部加载完了,所以默认应该是false，不然就不会去加载数据了
            但是加载完数据要判断有没有加载完，如果加载完了也要改成true
     -->

    <!-- 
       v-model绑定的pullLoading代表标记加载状态，为true代表正在加载，为false没加载
       当一下拉onRefresh这个方法
      -->
    <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="---我是有底线的---"
        @load="onLoad"
      >
        <!-- 单标签变双标签，然后用插槽自定义 -->
        <van-cell
          v-for="item in list"
          :key="item.art_id"
          @click="$router.push(`/article?id=${item.art_id}`)"
        >
          <!-- 标题区域 -->
          <div class="title">{{ item.title }}</div>
          <!-- 图片区域 -->
          <!-- column-num代表有3列，也就是说按3列平分 -->
          <!-- column-num为几，就只能有几个item，不然会错乱 -->
          <van-grid :border="false" :column-num="item.cover.type">
            <!-- item就是每一项或者说每一个格子 -->
            <!-- 每个格子里放的是图片 -->
            <van-grid-item
              v-for="(pic, index) in item.cover.images"
              :key="index"
            >
              <van-image :src="pic" />
            </van-grid-item>
          </van-grid>
          <!-- 作者信息区域 -->
          <div class="info-box">
            <span>{{ item.aut_name }}</span>
            <span>{{ item.comm_count }}评论</span>
            <span>{{ item.pubdate | relvTime }}</span>
            <van-icon style="float: right" name="cross" />
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// 导入接口
import { articleListAPI } from "@/api/article";
export default {
  // 子要
  props: ["channel_id"],
  data() {
    return {
      pullLoading: false,
      list: [],
      loading: false,
      finished: false,
      timestamp: Date.now(),
      // 保存往上滚出去的距离
      scrollTop: 0
    };
  },

  // 加了缓存后的多的两个钩子之一
  // 当组件重新显示时调用
  activated () {
    
    // 把我们保存的滚出去距离再次赋值给div的滚动条
    this.$refs.box.scrollTop = this.scrollTop
  },

  methods: {
    // 滚动触发的事件
    onScroll () {
      // 把这个div往上滚出去的距离存起来
      // 代表把div滚出去的距离存到scrollTop这个变量
      this.scrollTop = this.$refs.box.scrollTop
    },
    // onLoad页面一打开因为发现没铺满所以也会自动调用
    async onLoad() {
      // 发请求
      const res = await articleListAPI({
        channel_id: this.channel_id,
        // 第一次发的当前时间戳，第二次就是获取上一个时间段的新闻
        // 如果第三次来那就是上上个时间段的新闻，以此类推，这样每次都能往前得到新闻了
        timestamp: this.timestamp,
      });

      // 把上一个时间段的新闻时间戳存到变量里
      this.timestamp = res.data.pre_timestamp;
      // 把拿到的数组交给list
      // 第一次发请求得到10条，赋值给了数组
      // 第二次又发请求得到10条，还是赋值给了数组
      // 那就意味着后一次都会覆盖前面那一次，导致数组永远只有10条
      // this.list = res.data.results

      // 意味着我们应该是追加，而不是重新赋值
      // 如何追加？加到后面，肯定是用push
      this.list.push(...res.data.results);

      // 把本次的加载状态设置为false，代表本次完成可以开始下一次
      this.loading = false;

      // 判断新闻是否加载完成
      // if (this.timestamp == null) {
      // 简写
      if (!this.timestamp) {
        // 把完成标记改为true
        this.finished = true;
      }
    },

    // 下拉会触发的方法
    async onRefresh() {
      // 发请求去获取新闻，获取什么样的新闻？
      // 应该获取的是最新的新闻（意味着要传当前时间的时间戳）
      const res = await articleListAPI({
        channel_id: this.channel_id,
        // 这里写死，因为每次下拉都是为了获得当前时段的最新新闻，所以写死当前时间戳
        timestamp: Date.now(),
      });

      // 这里要用赋值，因为这样才有替换的效果
      // 因为本来下拉就应该刷新最新的新闻，就应该把以前的新闻干掉
      this.list = res.data.results;

      // 结束下拉状态
      this.pullLoading = false;

      // 把finished改为false,代表是一个新的开始
      this.finished = false;
    },
  },
};
</script>

<style scoped lang="less">
.article-list {
  position: fixed;
  // 盒子定位后默认没有宽度，是靠内容撑开的宽度
  width: 100%;
  top: 90px;
  bottom: 50px;
  overflow: auto;

  .info-box {
    span {
      color: gray;
      font-size: 12px;
      margin-right: 10px;
    }
  }
}
</style>